<template>
  <div class="container">
    <div class="container-top">
      <el-steps :active="active" simple class="steps">
        <el-step>
          <div slot="title">
            <div class="step-bz">1</div>服务基础信息
          </div>
        </el-step>
        <el-step>
          <div slot="title">
            <div class="step-bz">2</div>请求参数定义
          </div>
        </el-step>
        <el-step>
          <div slot="title">
            <div class="step-bz">3</div>返回类型
          </div>
        </el-step>
        <el-step>
          <div slot="title">
            <div class="step-bz">4</div>流量控制
          </div>
        </el-step>
        <el-step>
          <div slot="title">
            <div class="step-bz">5</div>文件上传
          </div>
        </el-step>
      </el-steps>
    </div>
    <div class="container-center">
      <fhlx ref="validate" v-if="active === 2"></fhlx>
      <fwjcxx ref="validate" v-if="active === 0"></fwjcxx>
      <llkz ref="validate" v-if="active === 3"></llkz>
      <qqcsdy ref="validate" v-if="active === 1"></qqcsdy>
      <wwsc ref="validate" @getJkwd="getJkwd" v-if="active === 4"></wwsc>
    </div>
    <div class="btns">
      <el-button type="primary" @click="last" v-if="active !== 0">上一步</el-button>
      <el-button type="primary" @click="next" v-if="active !== 4">下一步</el-button>
      <el-button v-loading="loading" type="success" @click="yzData" v-if="active === 4">发布</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>
<script>
import jkglService from '@/api/jkgl'
import Fhlx from './tabs/fhlx.vue'
import Fwjcxx from './tabs/fwjcxx.vue'
import Llkz from './tabs/llkz.vue'
import Qqcsdy from './tabs/qqcsdy.vue'
import wwsc from './tabs/wwsc.vue'

export default {
  components: { Fhlx, Fwjcxx, Llkz, Qqcsdy, wwsc },
  data() {
    return {
      loading: false,
      active: 0,
      formData: {},
      jkbh: ''
    }
  },
  mounted() {
    //获取路由信息
    this.getRouter()
  },
  methods: {
    /* 获取路由信息 */
    getRouter() {
      if (this.$route.query.cs) {
        this.jkbh = this.$route.query.cs
        this.getNlxq()
      }
    },
    /*
     * 获取能力详情(修改)
     */
    getNlxq() {
      const params = {
        jkbh: this.jkbh
      }
      jkglService
        .getJkdy(params)
        .then(res => {
          this.formData = res
          if (this.formData.bldz.slice(0, 6) === '/jkyq/') {
            this.formData.bldz = this.formData.bldz.split('/jkyq/')[1]
          }

          this.getMessageObj();
          // 先解析出流量控制参数
          this.getLlkz()
          // 初始进入，给第一个组件赋值
          this.setData()
        })
        .catch(err => {
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },

    /* 获取流量控制参数 */
    getLlkz() {
      if (this.formData.llkz && JSON.parse(this.formData.llkz)) {
        const obj = JSON.parse(this.formData.llkz)
        this.formData.mmxl = obj.mmxl
        this.formData.mfxl = obj.mfxl
        this.formData.mxsxl = obj.mxsxl
        this.formData.cscs = obj.cscs
      }
    },
    getMessageObj() {
      if (this.formData.xxzjjcs && JSON.parse(this.formData.xxzjjcs)) {
        const obj = JSON.parse(this.formData.xxzjjcs)
        this.formData.brokerId = obj.brokerId
        this.formData.logDirs = obj.logDirs
        this.formData.port = obj.port
        this.formData.rocketmqHome = obj.rocketmqHome
        this.formData.namesrvAddr = obj.namesrvAddr
        this.formData.kvConfigpath = obj.kvConfigpath
      }
    },
    /*
     * 下一步
     */
    next() {
      this.$refs.validate.validateForm().then(res => {
        this.formData = {
          ...this.formData,
          ...res
        }
        this.active++
        this.setData()
      })
    },

    /*
     * 上一步
     */
    last() {
      this.active--
      this.setData()
    },

    /* 设置内容 */
    setData() {
      this.$nextTick(() => {
        this.$refs.validate.form = {
          ...this.formData,
        }
      })
    },

    /*
     * 取消
     */
    cancel() {
      this.$router.go(-1)
    },

    /* 验证信息 */
    yzData() {
      this.$refs.validate.validateForm().then(res => {
        this.formData = { ...this.formData, ...res }
        // 重构llkz参数
        this.formData.llkz = JSON.stringify({
          mmxl: this.formData.mmxl,
          mfxl: this.formData.mfxl,
          mxsxl: this.formData.mxsxl,
          cscs: this.formData.cscs,
          // xxzjj:this.formData
        })

        if (this.formData.bldz.slice(0, 6) !== '/jkyq/') {
          this.formData.bldz = '/jkyq/' + this.formData.bldz
        }
        if (this.formData.jkbh) {
          this.editorData()
        } else {
          this.saveData()
        }
      })
    },

    /*
     * 发布-新增
     */
    saveData() {
      this.loading = true
      const params = { ...this.formData }

      jkglService
        .addJkdy(params)
        .then(res => {
          this.loading = false
          this.$message.success('发布成功')
          this.$router.go(-1)
        })
        .catch(err => {
          this.loading = false
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },

    /* 发布-修改 */
    editorData() {
      this.loading = true
      const params = { ...this.formData }
      jkglService
        .updateJkdy(params)
        .then(res => {
          this.loading = false
          this.$message.success('发布成功')
          this.$router.go(-1)
        })
        .catch(err => {
          this.loading = false
          !err.isError &&
            this.$message({ type: 'warning', message: err.message })
        })
    },
    getJkwd(val) {
      this.formData['jkwd'] = val;
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  background: #fff;
  padding: 20px;
  border: solid 1px #cecece;
  .btns {
    float: right;
    margin-top: 30px;
  }
  .container-top {
    border-bottom: solid 1px #cecece;
    height: 65px;
  }
  .steps {
    width: calc(100% - 100px);
    margin-left: 50px;
  }
  ::v-deep .el-steps--simple {
    background: #fff;
  }
  ::v-deep .el-step__icon {
    display: none;
  }
  .step-bz {
    width: 24px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid #cccccc;
    text-align: center;
    line-height: 24px;
    float: left;
    margin-right: 5px;
    margin-top: -2px;
  }
  ::v-deep .is-finish {
    .step-bz {
      border-color: #409eff;
    }
  }
  ::v-deep .is-process {
    .step-bz {
      border-color: #303133;
    }
  }
}
</style>
